
$(function () {
	console.log(echarts.version)
	function fullFn () {
		if (!document.fullscreenElement) {
			document.documentElement.requestFullscreen();
			$('.amplify').hide()
			$('.reduce').show()
		} else {
			$('.amplify').show()
			$('.reduce').hide()
			if (document.exitFullscreen) {
				document.exitFullscreen();
			}
		}
	}
	// 监听是否全屏
	window.onresize = function () {
		if (window.innerHeight === screen.height) {
			// 进入全屏模式
			$('.amplify').hide()
			$('.reduce').show()
			$(".itemTit").css({
				"height": "4.32vh",
				'line-height': '4.32vh'
			});
		} else {
			// 退出全屏模式 
			$('.amplify').show()
			$('.reduce').hide()
			// .itemTit{
			// 	/* height: 4.6vh; */
			// 	/* height: 2.6vh; */
			// }
			$(".itemTit").css({
				"height": "3vh",
				'line-height': '3vh'
			});
		}
	};

	$(document).ready(function () {
		$('.isFullDcreen').on('click', fullFn);
	});


	// 登出
	$('.exit-box').on('click', function () {
		location.href = "index.html";
	})


	//页面淡入效果
	$(".animsition").animsition({
		inClass: 'fade-in',
		outClass: 'fade-out',
		inDuration: 300,
		outDuration: 1000,

		loading: false,
		loadingParentElement: 'body',
		loadingClass: 'animsition-loading',
		unSupportCss: ['animation-duration',
			'-webkit-animation-duration',
			'-o-animation-duration'
		],


		overlay: false,

		overlayClass: 'animsition-overlay-slide',
		overlayParentElement: 'body'
	});

	document.onreadystatechange = subSomething;
	function subSomething () {
		if (document.readyState == "complete") {
			$('#loader').hide();
		}
	}

	function add0 (time) {
		if (time < 10) {
			time = "" + "0" + time;
		}
		return time;
	}
	//顶部时间
	function getTime () {
		var myDate = new Date();
		var myYear = myDate.getFullYear();
		var myMonth = myDate.getMonth() + 1;
		var myToday = myDate.getDate();
		var myDay = myDate.getDay();
		var myHour = myDate.getHours();
		var myMinute = myDate.getMinutes();
		var mySecond = myDate.getSeconds();
		var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		var nowTime;

		// nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;'
		nowTime = myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + add0(myHour) + ':' + add0(myMinute) + ':' + add0(mySecond) + '&nbsp;&nbsp;'
		// + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond);
		$('.topTime').html(nowTime);
	};
	function fillZero (str) {
		var realNum;
		if (str < 10) {
			realNum = '0' + str;
		} else {
			realNum = str;
		}
		return realNum;
	}
	setInterval(getTime, 1000);

	function totalNum (obj, speed) {
		var singalNum = 0;
		var timer;
		var totalNum = obj.attr('total');

		if (totalNum) {
			timer = setInterval(function () {
				singalNum += speed;
				if (singalNum >= totalNum) {
					singalNum = totalNum;
					clearInterval(timer);
				}
				obj.html(singalNum);
			}, 1);
		}
	}

	//高德地图
	var myMap = new AMap.Map('myMap', {
		resizeEnable: true,
		zoom: 14,
		// mapStyle: 'amap://styles/darkblue',
		// 马卡龙 macaron;草色青 fresh;
		// 标准 normal ; 幻影黑 dark;   远山黛 whitesmoke;  月光银 light;    雅士灰 grey;  涂鸦  graffiti;  靛青蓝 blue;  极夜蓝 darkblue;   酱籽 wine;
		mapStyle: 'amap://styles/macaron',
		// center: [117.722702, 38.909459],
	});
	let newArr = [
		{
			// 加油机名称
			"name": "名称1",
			// 加油机编码
			"code": "code1",
			// 所属机构
			"organizationCode": "string",
			// 经度
			"longitude": 117.722702,
			// 维度
			"latitude": 38.909459,
			// 1#氧气传感器
			"hydrogenSensor1": 1,
			// 2#氧气传感器
			"hydrogenSensor2": 1,
			// 水压
			"waterPressure": 1,
			// 高压压力
			"highPressure": 1,
			// 加氢口压力
			"hydrogenTailPressure": 1,
			// 加氢压力
			"hydrogenPressure": 1,
			// 入口水温
			"inWaterTemperature": 1,
			// 出口水温
			"outWaterTemperature": 1,
			// 加氢口温度
			"hydrogenTailTemperature": 1,
			// 储氢温度
			"hydrogenTemperature": 1,
			// id
			"id": 1,
			// 地址
			address: '天津市滨海新区临港经济区智能装备园1号厂房1',
			// 是否在线
			isOnline: true,
			// 状态
			status: '空闲',
		}, {
			// 加油机名称
			"name": "名称2",
			// 加油机编码
			"code": "code2",
			// 所属机构
			"organizationCode": "string",
			// 经度
			"longitude": 117.739037,
			// 维度
			"latitude": 38.912046,
			// 1#氧气传感器
			"hydrogenSensor1": 2,
			// 2#氧气传感器
			"hydrogenSensor2": 2,
			// 水压
			"waterPressure": 2,
			// 高压压力
			"highPressure": 2,
			// 加氢口压力
			"hydrogenTailPressure": 2,
			// 加氢压力
			"hydrogenPressure": 2,
			// 入口水温
			"inWaterTemperature": 2,
			// 出口水温
			"outWaterTemperature": 2,
			// 加氢口温度
			"hydrogenTailTemperature": 2,
			// 储氢温度
			"hydrogenTemperature": 2,
			// id
			"id": 2,
			// 地址
			address: '天津市滨海新区临港经济区智能装备园1号厂房2',
			// 是否在线
			isOnline: false,
			// 状态
			status: '正常',
		}, {
			// 加油机名称
			"name": "名称3",
			// 加油机编码
			"code": "code3",
			// 所属机构
			"organizationCode": "string",
			// 经度
			"longitude": 117.71188,
			// 维度
			"latitude": 38.901257,
			// 1#氧气传感器
			"hydrogenSensor1": 3,
			// 2#氧气传感器
			"hydrogenSensor2": 3,
			// 水压
			"waterPressure": 3,
			// 高压压力
			"highPressure": 3,
			// 加氢口压力
			"hydrogenTailPressure": 3,
			// 加氢压力
			"hydrogenPressure": 3,
			// 入口水温
			"inWaterTemperature": 3,
			// 出口水温
			"outWaterTemperature": 3,
			// 加氢口温度
			"hydrogenTailTemperature": 3,
			// 储氢温度
			"hydrogenTemperature": 3,
			// id
			"id": 3,
			// 地址
			address: '天津市滨海新区临港经济区智能装备园1号厂房3',
			// 是否在线
			isOnline: true,
			// 状态
			status: '异常',
		}
	]


	const statusMap = {
		'加注中': 'state-success',
		'异常': 'state-danger',
		'离线': 'state-warning',
		'空闲': 'state-info',
	}
	// 加氢机实时数据表格函数
	const initTable = function (data) {

		let timeData = `
		数据更新时间： ${data.mqttRefreshTime}
		`
		$('.real-time-box').empty()
		$('.real-time-box').append(timeData)
		// hydrogenSensor1
		let tableData1 = ''
		tableData1 = tableData1 + `<span class="${data.isOnline ? 'state-online' : 'state-offline'} ">${data.isOnline ? '在线' : '离线'}</span>
		<span class="${statusMap[data.status]}">${data.status}</span>
		<span>${data.hydrogenSensor1 || '—'}ppm</span> 
		<span>${data.refuelingWeight || '—'}kg</span>
		<span>${data.refuelingDuration || '—'}min</span>`
		$('#table1').empty()
		$('#table1').append(tableData1)
		let tableData2 = ''
		tableData2 = tableData2 + `		
		<span>${data.highPressure || '—'}MPa</span>
		<span>${data.hydrogenTailPressure || '—'}MPa</span>
		<span>${data.hydrogenPressure || '—'}MPa</span>
		<span>${data.inWaterTemperature || '—'}°C</span>
		<span>${data.outWaterTemperature || '—'}°C</span>`
		$('#table2').empty()
		$('#table2').append(tableData2)
		// let tableData3 = ''
		// tableData3 = tableData3 + `	<span>${data.address}</span>
		// <span></span><span></span><span></span><span></span>`
		// $('#table3').empty()
		// $('#table3').append(tableData3)
		$('.jq-address').empty()
		$('.jq-address').append(data.address)
	}
	// 初始化列表
	// initTable(newArr[0])


	// 加氢机实时数据
	funAjax.get('/GetHydrogenDispenserMonitor').then(res => {
		console.log(res)
		let newOption = ''
		res.forEach(item => {
			item.point = [item.longitude, item.latitude]
			let obj = {}
			const keys = Object.keys(item)
			keys.forEach((val) => {
				if (val != 'mqttRefreshTime') {
					obj[val] = item[val]
				}
			})
			newOption = newOption + `<option  data-curDataItem=${JSON.stringify(obj)} data-mqttRefreshTime="${item.mqttRefreshTime}"  value = ${item.code}>${item.name}</option>`
		})
		// 遍历数据到下拉框
		$('#machineCode').append(newOption)
		// 初始化列表
		initTable(res[0])
		myMap.setCenter([res[0].longitude, res[0].latitude])
		// // 初始化地图选点同时触发
		// let content = `<p>加氢站编号:${res[0].code}</p>` +
		// 	`<p>地址：${res[0].address}</p><p>状态：${res[0].status}</p>`;
		// infoWindow.setContent(content);
		// infoWindow.open(myMap, {
		// 	Q
		// 		:
		// 		res[0].latitude,
		// 	R
		// 		:
		// 		res[0].longitude,
		// 	lat
		// 		:
		// 		res[0].latitude,
		// 	lng
		// 		:
		// 		res[0].longitude,
		// });


		// const markerSvg1 = window.btoa(`<svg t="1719304400351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" width="200" height="200"><path d="M472.535913 1003.339745C181.939986 582.061852 128 538.825863 128 383.999903 128 171.921956 299.921956 0 511.999903 0s383.999903 171.921956 383.999902 383.999903c0 154.825961-53.939986 198.06195-344.535913 619.339842-19.069995 27.547993-59.859985 27.545993-78.927979 0z" p-id="1582" fill="#23f2dc"></path></svg>`);
		// const markerSvg2 = window.btoa(`<svg t="1719304400351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" width="200" height="200"><path d="M472.535913 1003.339745C181.939986 582.061852 128 538.825863 128 383.999903 128 171.921956 299.921956 0 511.999903 0s383.999903 171.921956 383.999902 383.999903c0 154.825961-53.939986 198.06195-344.535913 619.339842-19.069995 27.547993-59.859985 27.545993-78.927979 0z" p-id="1582" fill="#92d050"></path></svg>`);
		// const markerSvg3 = window.btoa(`<svg t="1719304400351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" width="200" height="200"><path d="M472.535913 1003.339745C181.939986 582.061852 128 538.825863 128 383.999903 128 171.921956 299.921956 0 511.999903 0s383.999903 171.921956 383.999902 383.999903c0 154.825961-53.939986 198.06195-344.535913 619.339842-19.069995 27.547993-59.859985 27.545993-78.927979 0z" p-id="1582" fill="#ffff00"></path></svg>`);
		// let markerArr = ['#00b0f0', '#23f2dc', '#92d050', '#ffff00',]
		const markerObj = {
			'加注中': '#92d050',
			'异常': '#f14e47',
			'离线': '#feab02',
			'空闲': '#00b0f0',
		}
		function rtMarker (color) {
			let str = `<svg t="1719304400351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" width="200" height="200"><path d="M472.535913 1003.339745C181.939986 582.061852 128 538.825863 128 383.999903 128 171.921956 299.921956 0 511.999903 0s383.999903 171.921956 383.999902 383.999903c0 154.825961-53.939986 198.06195-344.535913 619.339842-19.069995 27.547993-59.859985 27.545993-78.927979 0z" p-id="1582" fill="${color}"></path></svg>`
			let data = window.btoa(str)
			return data;
		}
		// const icon = new AMap.Icon({
		// 	size: new AMap.Size(25, 34), //图标尺寸
		// 	image: `data:image/svg+xml;base64,${markerSvg}`, //Icon 的图像
		// 	imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
		// 	imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
		// });

		for (var i = 0; i < res.length; i++) {
			const content = `<div class="custom-content-marker">
			<img src="data:image/svg+xml;base64,${rtMarker(markerObj[res[i].status])}">
			</div>`;
			// debugger 		//接口返回的坐标是错的
			var marker = new AMap.Marker({
				content: content,
				//接口返回的坐标是错的
				position: res[i].point,
				// icon: "../images/marke1.svg", //
				// icon: icon,
				// ../images/gz.png
				map: myMap,
			});
			marker.originalObj = res[i]
			marker.content = `<p>加氢站编号:${res[i].code}</p>` +
				`<p>地址：${res[i].address}</p><p>状态：${res[i].status}</p>`;
			marker.on('click', markerClick);
			//map.setFitView(); 
		}
	})
	// var point = [
	// 	[117.722702, 38.909459],
	// 	[117.739037, 38.912046],
	// 	[117.71188, 38.901257]
	// ]

	// for (var i = 0; i < point.length; i += 1) {
	// 	var marker = new AMap.Marker({
	// 		position: point[i],
	// 		map: myMap,
	// 	});
	// 	marker.content = '<p>加氢站编号</p>' +
	// 		'<p>地址：</p>' +
	// 		'<p>状态：正常</p>';
	// 	marker.on('click', markerClick);
	// 	//map.setFitView(); 
	// }



	var infoWindow = new AMap.InfoWindow({
		offset: new AMap.Pixel(16, -36)
	});
	// 地图点击事件
	function markerClick (e) {
		infoWindow.setContent(e.target.content);
		console.log(e.target.getPosition())
		infoWindow.open(myMap, e.target.getPosition());

		initTable(e.target.originalObj)
		$('#machineCode').val(e.target.originalObj.code)
	}
	// 下拉列表监听事件
	$('#machineCode').on('change', function (e) {
		// console.log(e, '事件监听')
		var curDataItem = $(this).find("option:selected").attr("data-curDataItem");
		var mqttRefreshTime = $(this).find("option:selected").attr("data-mqttRefreshTime");
		let obj = JSON.parse(curDataItem)
		obj.mqttRefreshTime = mqttRefreshTime
		// 选中下拉框让地图选点同时触发
		let content = `<p>加氢站编号:${obj.code}</p>` +
			`<p>地址：${obj.address}</p><p>状态：${obj.status}</p>`;
		console.log(content, 'contentcontent')
		infoWindow.setContent(content);
		infoWindow.open(myMap, obj.point);
		initTable(obj)
	})

	myMap.on('click', function () {
		infoWindow.close();
	});

	// 全屏点击事件
	function fullScreen () {
		var el = document.documentElement;
		var rfs =
			el.requestFullScreen ||
			el.webkitRequestFullScreen ||
			el.mozRequestFullScreen ||
			el.msRequestFullscreen;
		if (typeof rfs != "undefined" && rfs && this.isFullScreen === false) {
			rfs.call(el);
			this.isFullScreen = true;
		}
		return;
	}

	// $('.isFullDcreen').on('click', function () {
	// 	console.log('点击')
	// 	fullScreen()
	// })


	// 可用加氢机
	var myChartPieAvailable = echarts.init(document.getElementById('myChartPieAvailable'), 'shine');
	let stateMap = {
		'离线': 'hydrogenDispenserOfflineCount',
		'空闲': 'hydrogenDispenserReadyCount',
		'加注中': 'hydrogenDispenserRunningCount',
		'异常': 'hydrogenDispenserAlarmCount',
	}
	var optionPieAvailable = {
		title: {
			// 图形标题(如果想要换行则使用ES6 `` 模板字符串)
			// 例如： `示例
			//   这里的文字会变为第二行(因为会保留格式)
			show: false,
			text: `  总数：\n0台`,
			left: "20%",//对齐方式居中
			top: "center",//距离顶部
			textStyle: {//文字配置
				color: "rgb(50,197,233)",//文字颜色
				fontSize: 12,//字号
				align: "center"//对齐方式
			},
			textAlign: 'auto'
		},
		legend: {
			// show: true,
			type: 'plain',
			orient: 'vertical',
			right: '10%',
			icon: 'circle',
			top: 'center',
			textStyle: {
				color: '#fff',
				fontSize: 10,
			},
			formatter: function (name) {
				return name + `\n\n0台    0%`;
			},
			// itemGap: 20,
			itemWidth: 10,
			itemHeight: 10,
		},
		tooltip: {
			trigger: 'item',
			// formatter: '{b}<br>数量：{c}<br>占比：{d}%'
			formatter: function (params) {
				var res = params.name + '<br>'
					+ '数量：' + params.value + '台<br>' +

					'占比：' + params.percent.toFixed(0) + '%';
				return res;
			},
		},
		grid: {
			top: '5%'
		},
		// 饼图
		color: ['#00b0f0', '#23f2dc', '#92d050', '#ffff00', '#feab02', '#df1f93', '#f14e47'],
		series: [
			{
				name: '可用加氢机',
				type: 'pie',
				radius: ['60%', '75%'],
				center: ['30%', '50%'],
				data: [
					{ value: 0, name: '离线' },
					{ value: 0, name: '空闲', },
					{ value: 0, name: '加注中', },
					{ value: 0, name: '异常', },
				],
				label: {
					position: 'center',
					show: true,
					formatter: function (params) {
						var res = params.name + '\n' +
							'占比：' + params.percent.toFixed(0) + '%';
						// return res;
						return `加氢机总数\n${'0'}台`
					},
					textStyle: {//文字配置
						color: "rgb(50,197,233)",//文字颜色
						fontSize: 12,//字号
						align: "center"//对齐方式
					},
				},
				labelLine: {
					normal: {
						length: 5,
						length2: 5,
						lineStyle: {
							width: 1
						}
					}
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};



	// 加氢机信息接口返回
	funAjax.get('/GetHydrogenDispenserSummary').then(res => {
		let str = `
			<li>${res.refuelingCount}<span></span></li>
								<li>${res.refuelingWeight}<span>kg</span></li>
								<li>${res.refuelingVolume}<span>m³</span></li>
			`

		$('.detaile-box').empty()
		$('.detaile-box').append(str)
		let total = 0
		for (key in stateMap) {
			total = total + res[stateMap[key]]
		}
		optionPieAvailable = {
			title: {
				// 图形标题(如果想要换行则使用ES6 `` 模板字符串)
				// 例如： `示例
				//   这里的文字会变为第二行(因为会保留格式)
				show: false,
				text: `  总数：\n${total}台`,
				left: "20%",//对齐方式居中
				top: "center",//距离顶部
				textStyle: {//文字配置
					color: "rgb(50,197,233)",//文字颜色
					fontSize: 12,//字号
					align: "center"//对齐方式
				},
				textAlign: 'auto'
			},
			legend: {
				// show: true,
				type: 'scroll',
				orient: 'vertical',
				pageIconColor: 'transparent', // 隐藏翻页按钮
				pageIconInactiveColor: 'transparent', // 隐藏翻页按钮
				pageIconSize: 0, // 隐藏翻页按钮
				pageTextStyle: {
					fontSize: 1,
					color: 'transparent' // 隐藏翻页按钮的文字
				},
				pageIconSize: 0,
				right: '5%',
				icon: 'circle',
				// top: '10%',
				top: 'center',
				textStyle: {
					color: '#fff',
					fontSize: 13,
				},
				formatter: function (name) {
					return name + `   ${res[stateMap[name]]}台    ${(res[stateMap[name]] / total * 100).toFixed(0)}%`;
				},
				// itemGap: 20,
				itemWidth: 10,
				itemHeight: 10,
			},
			tooltip: {
				trigger: 'item',
				// formatter: '{b}<br>数量：{c}<br>占比：{d}%'
				formatter: function (params) {
					var res = params.name + '<br>'
						+ '数量：' + params.value + '台<br>' +

						'占比：' + params.percent.toFixed(0) + '%';
					return res;
				},
			},
			grid: {
				top: '5%'
			},
			// 饼图
			// color: ['#dad6d6', '#3fb1e3', '#a0a7e6', '#c4ebad', '#96dee8'],
			color: ['#00b0f0', '#f14e47', '#92d050', '#ffff00', '#feab02', '#df1f93', '#23f2dc'],
			series: [
				{
					name: '可用加氢机',
					type: 'pie',
					radius: ['60%', '75%'],
					center: ['25%', '50%'],
					data: [
						{ value: res[stateMap['离线']], name: '离线' },
						{ value: res[stateMap['空闲']], name: '空闲', },
						{ value: res[stateMap['加注中']], name: '加注中', },
						{ value: res[stateMap['异常']], name: '异常', },
					],
					label: {
						position: 'center',
						show: true,
						formatter: function (params) {
							var res = params.name + '\n' +
								'占比：' + params.percent.toFixed(0) + '%';
							// return res;
							return `加氢机总数\n${total}台`
						},
						textStyle: {//文字配置
							color: "rgb(50,197,233)",//文字颜色
							fontSize: 13,//字号
							align: "center",//对齐方式
							lineHeight: 16
						},
					},
					labelLine: {
						normal: {
							length: 5,
							length2: 5,
							lineStyle: {
								width: 1
							}
						}
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		myChartPieAvailable.setOption(optionPieAvailable);
	})


	// 获取图例的总页数
	// console.log(myChartPieAvailable.getOption(), 'myChartPieAvailable.getOption()myChartPieAvailable.getOption()')
	// var totalPage = myChartPieAvailable.getOption().legend[0].pageIconInactiveColor;
	// console.log(totalPage, 'totalPage')

	// 图例自动滚动-方法
	function legendScrollFn (chart, option, scrollNum = 2, time = 5000) {
		var currentPage = 1;
		function autoScroll () {
			chart.dispatchAction({
				type: 'legendScroll',
				scrollDataIndex: currentPage * scrollNum   //一下滚动几个
			});
			currentPage++;
			// if (currentPage * 5 >= option.legend.data.length) {
			if (currentPage * scrollNum >= option.series[0].data.length) {
				currentPage = 0;
			}
		}
		let timer = null
		clearInterval(timer)
		timer = setInterval(autoScroll, time);
		// chart.on('click', function () {
		// 	clearInterval(timer);
		// 	timer = setInterval(autoScroll, time);
		// });
	}
	// 图例自动滚动-加氢机信息图例滚动
	// legendScrollFn(myChartPieAvailable, optionPieAvailable, 2)


	// myChartPieAvailable.dispatchAction({
	// 	type: "highlight",
	// 	//seriesIndex：number | array系列 index，可以是一个数组指定多个系列
	// 	seriesIndex: 0,
	// 	//dataIndex：number 数据的 index
	// 	dataIndex: 1
	// })

	//单日加氢总量
	funAjax.get('/GetRefuelingGroupByDay').then(res => {
		res.forEach(item => {
			const date = new Date(item.occurDate); // 获取当前日期对象
			const timestamp = date.getTime(); // 获取时间戳
			item.timestampNum = timestamp
		})
		// 升序排列
		res.sort(function (a, b) {
			return a.timestampNum - b.timestampNum
		})
		formatterTime(res[0].occurDate)
		let arr = []
		res.forEach(item => {
			arr.push({
				value: item.refuelingWeight,
				name: formatterTime(item.occurDate)
			})
		})
		option1.xAxis.data = arr.map((item) => item.name)
		option1.series.data = arr.map((item) => item.value)
		myChart1.setOption(option1);
	})
	function formatterTime (time) {
		let date = new Date(time)
		const month = date.getMonth() + 1
		const day = date.getDate()
		return `${month}/${day}`
	}
	var myChart1 = echarts.init(document.getElementById('myChart1'));
	var option1 = {
		tooltip: {
			trigger: 'item',
			formatter: function (params) {
				// var res = '本月' + params.name + '号加氢量：' + params.data + 'kg';
				var res = params.name + '加氢量：' + params.data + 'kg';
				return res;
			}
		},
		dataZoom: [
			{
				// 没有下面这块的话，只能拖动滚动条，
				// 鼠标滚轮在区域内不能控制外部滚动条
				type: "inside",
				// 滚轮是否触发缩放
				zoomOnMouseWheel: true,
				// 鼠标滚轮触发滚动
				// start: 0,//初始化时，滑动条宽度开始标度
				// end: 35, //初始化时，滑动条宽度结束标度
				moveOnMouseMove: true,
				moveOnMouseWheel: true,
				startValue: 0,
				endValue: 11,
			},
			{

				type: "slider",
				show: true, // 这里可以手动根据数据量判断是否展示
				height: "6",
				bottom: "4%",
				backgroundColor: "#CCCCCC",
				brushSelect: false,
				left: "center",
				handleIcon:
					"path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
				handleColor: "#429AE9",
				handleSize: 8,
				backgroundColor: "rgba(19, 63, 100,1)",
				fillerColor: "rgba(16, 171, 198,1)",
				start: 0,
				end: 100,
				showDetail: false,
				width: '100%',
				handleStyle: {
					borderCap: 'round',
					borderWidth: 0
				}
				// // 设置滚动条的隐藏与显示
				// show: true,
				// // 设置滚动条类型
				// type: "slider",
				// // 设置背景颜色
				// backgroundColor: "rgba(19, 63, 100,1)",
				// // 设置选中范围的填充颜色
				// // fillerColor: "rgba(16, 171, 198,1)",
				// // 设置边框颜色
				// borderColor: "rgb(19, 63, 100)",
				// // borderColor: "rgb(19, 63, 100)",
				// // 是否显示detail，即拖拽时候显示详细数值信息
				// showDetail: false,
				// // 数据窗口范围的起始数值
				// startValue: 0,
				// // 数据窗口范围的结束数值（一页显示多少条数据）
				// endValue: 5,
				// // empty：当前数据窗口外的数据，被设置为空。
				// // 即不会影响其他轴的数据范围
				// filterMode: "empty",
				// // 设置滚动条宽度，相对于盒子宽度
				// width: "100%",
				// // 设置滚动条高度
				// // height: 12,
				// height: 5,
				// // 设置滚动条显示位置
				// left: "center",
				// // 是否锁定选择区域（或叫做数据窗口）的大小
				// zoomLock: true,
				// // 控制手柄的尺寸
				// handleSize: 20,
				// // dataZoom-slider组件离容器下侧的距离
				// bottom: 8,
			},
		],
		grid: {
			top: '20%',
			bottom: '15%',
			left: '5%',
			right: '50px',
			// width: '80%',
			height: '65%',
			containLabel: true
		},
		xAxis: {
			name: '月/日',
			data: ['暂无数据'], // 这里的日期数据将在后面动态生成并更新
			axisLabel: {
				show: true,
				// formatter: '日期：月/日',
				textStyle: {
					fontSize: '12px',
					color: '#fff',
				}
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
					width: 1,
				}
			}
		},

		yAxis: {
			name: '单位：kg',
			axisLabel: {
				show: true,
				textStyle: {
					fontSize: '12px',
					color: '#fff',
				},
				// formatter: '{value} kg', // 在此处添加单位
				formatter: '{value}', // 在此处添加单位
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
					width: 1,
				},
			},
			splitLine: {
				show: false,
			}
		},
		series: {
			name: '',
			type: 'line',
			barWidth: 10,
			data: [0],
			itemStyle: {
				normal: {
					barBorderRadius: [5, 5, 5, 5],
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{ offset: 0, color: '#3876cd' },
							{ offset: 0.5, color: '#45b4e7' },
							{ offset: 1, color: '#54ffff' }
						]
					),
				},
			},
		},
	};


	// CO₂减排效果
	funAjax.get('/GetCarbonEmission').then(res => {
		$('.r-top-content').empty()
		$('.r-top-content').append(
			`	<ul>
								<li >${res.hydrogenPowerGeneration}<span>MWh</span></li>
								<li >${res.reduceCarbonEmission}<span>t</span></li>
							</ul>`
		)
	})

	// 当日订单
	funAjax.get('/GetTopOrder').then(res => {
		console.log(res, '当日订单')
		let str = ''
		res.forEach(item => {
			str = str + `
							<li>
										<div  class="fontInner clearfix time-item" data-obj=${JSON.stringify(item)}>
											<span>${item.orderNo}</span>
											<span>${item.refuelingWeight}</span>
											<span>${item.unitPrice}</span>
											<span>${item.totalPrice}</span>
										</div>
									</li>`
		})
		$('.list-box').empty()
		$('.list-box').append(str)
		start1()
	})

	// 加氢机排名
	funAjax.get('/GetHydrogenDispenserRank').then(res => {
		let str = ''
		res.forEach(item => {
			str = str + `
							<li>
										<div class="fontInner clearfix">
											<span>${item.hydrogenDispenserName}</span>
											<span>${item.refuelingWeight}</span>
											<span>${item.turnover}</span>
											<span>${item.tradeDays}</span>
										</div>
									</li>`
		})
		$('.refueling-no').empty()
		$('.refueling-no').append(str)
		start2()
	})



	//用户单月加氢占比
	var myChartPie = echarts.init(document.getElementById('myChartPie'), 'shine');

	// 用户单月加氢占比-接口请求
	funAjax.get('/GetRefuelingGroupByUser').then(res => {
		let newArr = []
		res.forEach((item, index) => {
			newArr.push({
				name: item.userName,
				value: item.refuelingWeight
			})
		})
		let total = newArr.reduce((prev, cur, index, arr) => {
			return prev += cur.value
		}, 0)
		optionPieFn(newArr, total)
		myChartPie.setOption(optionPie);
		// 图例自动滚动-用户单月加氢量图例滚动
		// legendScrollFn(myChartPie, optionPie, 3)
	})

	function reduceNum (arr, name) {
		let val = ''
		arr.forEach(item => {
			if (item.name === name) {
				val = item.value
			}
		})
		return val
	}
	let optionPie = {
		tooltip: {
			trigger: 'item',
			formatter: function (params) {
				var res = params.name + '<br>'
					+ '加氢量：' + params.value + 'kg<br>' +
					'占比：' + params.percent.toFixed(0) + '%';
				return res;
			},
			// formatter: '{b}<br>加氢量：{c}<br>占比：{d}%'
		},
		legend: {
			show: true,
			type: 'scroll',
			orient: 'vertical',
			pageIconColor: 'transparent', // 隐藏翻页按钮
			pageIconInactiveColor: 'transparent', // 隐藏翻页按钮
			pageIconSize: 0, // 隐藏翻页按钮
			pageTextStyle: {
				fontSize: 1,
				color: 'transparent' // 隐藏翻页按钮的文字
			},
			pageIconSize: 0,
			right: '5%',
			icon: 'circle',
			top: 'center',
			// top: '15%',
			textStyle: {
				color: '#fff',
				fontSize: 13,
			},
			formatter: function (name) {
				return '暂无数据' + `0kg    0%`;
			},
			// itemGap: 20,
			itemWidth: 10,
			itemHeight: 10,
		},
		// 饼图
		// color: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad', '#96dee8'],
		color: ['#00b0f0', '#f14e47', '#92d050', '#ffff00', '#df1f93', '#23f2dc',],
		series: [
			{
				name: '用户单月加氢占比',
				type: 'pie',
				radius: ['60%', '75%'],
				center: ['25%', '50%'],
				data: [
					{
						name: '',
						value: 0
					}
				],
				// data: [
				// 	{ value: 1048, name: '租户1' },
				// 	{ value: 735, name: '租户2' },
				// 	{ value: 580, name: '租户3' },
				// 	{ value: 484, name: '租户4' },
				// 	{ value: 300, name: '租户5' }
				// ],
				label: {
					position: 'center',
					show: true,
					formatter: function (params) {
						var res = params.name + '\n' +
							'占比：' + params.percent.toFixed(0) + '%';
						// return res;
						return `加氢总量\n0kg`
					},
					textStyle: {//文字配置
						color: "rgb(50,197,233)",//文字颜色
						fontSize: 13,//字号
						align: "center",//对齐方式
						lineHeight: 16
					},
				},
				labelLine: {
					normal: {
						length: 5,
						length2: 5,
						lineStyle: {
							width: 1
						}
					}
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	}
	function optionPieFn (arr = [], total = 0) {
		optionPie.series[0].data = arr
		optionPie.legend.formatter = function (name) {
			return name + `  ${reduceNum(arr, name)}kg    ${(reduceNum(arr, name) / total * 100).toFixed(0)}%`;
		}
		optionPie.series[0].label.formatter = function (params) {
			var res = params.name + '\n' +
				'占比：' + params.percent.toFixed(0) + '%';
			// return res;
			return `加氢总量\n${total}kg`
		}
	}



	// 获取当前日期的年份和月份
	var currentDate = new Date();
	var year = currentDate.getFullYear();
	var month = currentDate.getMonth() + 1;
	var lastDay = new Date(year, month, 0).getDate(); // 获取当前月份的天数

	// 计算需补充的上个月日期数量
	var firstDayOfWeek = new Date(year, month - 1, 1).getDay(); // 获取当前月份第一天是星期几
	var lastMonthDaysToFill = firstDayOfWeek > 0 ? firstDayOfWeek : 0; // 需要补充的上个月日期数量

	// 生成需要补充的上个月日期数据
	var prevMonthYear = month === 1 ? year - 1 : year; // 计算上个月的年份
	var prevMonth = month === 1 ? 12 : month - 1; // 计算上个月的月份
	var prevMonthLastDay = new Date(prevMonthYear, prevMonth, 0).getDate(); // 获取上个月的天数
	var prevMonthDateData = [];
	for (var i = prevMonthLastDay - lastMonthDaysToFill + 1; i <= prevMonthLastDay; i++) {
		prevMonthDateData.push(i.toString());
	}

	// 动态生成日期数据
	var dateData = [];
	for (var i = 1; i <= lastDay; i++) {
		dateData.push(i.toString());
	}

	// 合并上个月日期数据和当前月份的日期数据
	var combinedDateData = prevMonthDateData.concat(dateData.slice(0, 30 - lastMonthDaysToFill)); // 保持 x 轴永远有 30 个数

	// 更新图表的 x 轴日期数据
	// option1.xAxis.data = combinedDateData;
	// 现在改成MM/DD
	// option1.xAxis.data = ['3/2', '3/4', '3/5', '3/6', '3/7', '3/8', '3/9', '3/10', '3/11', '3/12', '3/13', '3/14',];

	// 显示更新后的 x 轴日期数据
	// console.log(option1.xAxis.data);



	//yunxin文字滚动
	// $('#FontScroll').FontScroll({ time: 3000, num: 1 });


	// $('#FontScrollRt').FontScroll({ time: 3000, num: 1 });
	// var type = "ul";//滚动列表
	var demo1 = null;
	var demo2 = null;

	demo1 = new FontScroll('#FontScroll', {
		time: 2000,//每次滚动的时间间隔(单位：毫秒)，默认3000
		speed: 500,//滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
		timeoutMethod: 'interval', //延时时间方式：interval-使用setInverval处理；timeout-使用setTimeout处理
		rowClass: 'fontColor',//滚动选中行的样式，默认：fontColor
		num: 0,//滚动选中的行序号，默认：0 表示第一行
		skip: 0,//滚动时上面留白显示的行数，默认0
		scrollBehavior: 'rowFirst', //滚动动画与行样式的先后顺序：rowFirst先加行样式，再动画滚动；scrollFirst先动画滚动，再加行样式
		pauseOnHover: false,//鼠标经过时是否暂停，默认：true
		startOnInit: false,//初始化后是否自动运行，默认：true
		init: false,
		ul: 'ul', //滚动的行的外部容器（选择器），用于获取滚动区域的实际高度
		li: 'li', //滚动行（选择器）
	});

	demo2 = new FontScroll('#FontScrollRt', {
		time: 2000,//每次滚动的时间间隔(单位：毫秒)，默认3000
		speed: 500,//滚动动画时间(单位：毫秒)，数值越小滚动动画速度越快，默认500
		timeoutMethod: 'interval', //延时时间方式：interval-使用setInverval处理；timeout-使用setTimeout处理
		rowClass: 'fontColor',//滚动选中行的样式，默认：fontColor
		num: 1,//滚动选中的行序号，默认：0 表示第一行
		skip: 1,//滚动时上面留白显示的行数，默认0
		scrollBehavior: 'scrollFirst', //滚动动画与行样式的先后顺序：rowFirst先加行样式，再动画滚动；scrollFirst先动画滚动，再加行样式
		pauseOnHover: true,//鼠标经过时是否暂停，默认：true
		startOnInit: false,//初始化后是否自动运行，默认：true
		init: false,
		ul: 'ul', //滚动的行的外部容器（选择器），用于获取滚动区域的实际高度
		li: 'li', //滚动行（选择器）
	});
	// 模拟后台数据
	let reqList = [
		{
			bianhao: 'ZC1712',
			num: '400L',
			danjia: ''
		}
	]
	//初始化
	function init () {
		if (demo1 != null) demo1.init();
		if (demo2 != null) demo2.init();
	}
	//启动当日订单
	function start1 () {
		if (demo2 != null) demo2.start();
	}
	//启动加氢机排名
	function start2 () {
		if (demo1 != null) demo1.start();
	}
	//加一行
	function testAddLi () {
		if (demo1 != null) {
			demo1.addLi("<li style='height:35px;'>第" + (demo1.length + 1) + "条</li>");
			console.info("已添加一行li");
		}
		if (demo2 != null) {
			demo2.addLi("<tr><td style='height:35px;'>第" + (demo2.length + 1) + "条</td></tr>");
			console.info("已添加一行tr");
		}
		if (demo3 != null) {
			demo3.addLi("<div class='row' style='height:35px;'>第" + (demo3.length + 1) + "条</div>");
			console.info("已添加一行div");
		}
	}
	init()
	// start1()
	// start2()

	setTimeout(function () {
		$('.progress').each(function (i, ele) {
			var PG = $(ele).attr('progress');
			var PGNum = parseInt(PG);
			var zero = 0;
			var speed = 50;
			var timer;

			$(ele).find('h4').html(zero + '%');
			if (PGNum < 10) {
				$(ele).find('.progressBar span').addClass('bg-red');
				$(ele).find('h3 i').addClass('color-red');
			} else if (PGNum >= 10 && PGNum < 50) {
				$(ele).find('.progressBar span').addClass('bg-yellow');
				$(ele).find('h3 i').addClass('color-yellow');
			} else if (PGNum >= 50 && PGNum < 100) {
				$(ele).find('.progressBar span').addClass('bg-blue');
				$(ele).find('h3 i').addClass('color-blue');
			} else {
				$(ele).find('.progressBar span').addClass('bg-green');
				$(ele).find('h3 i').addClass('color-green');
			}
			$(ele).find('.progressBar span').animate({ width: PG }, PGNum * speed);
			timer = setInterval(function () {
				zero++;
				$(ele).find('h4').html(zero + '%');
				if (zero == PGNum) {
					clearInterval(timer);
				}
			}, speed);
		});
		totalNum($('#totalNum'), 1000);
		myChart1.setOption(option1);
		myChartPie.setOption(optionPie);
		myChartPieAvailable.setOption(optionPieAvailable);
	}, 500);

	var summaryPie1, summaryPie2, summaryPie3, summaryBar, summaryLine;
	var pieData;
	function setSummary () {
		summaryPie1 = echarts.init(document.getElementById('summaryPie1'));
		summaryPie2 = echarts.init(document.getElementById('summaryPie2'));
		summaryPie3 = echarts.init(document.getElementById('summaryPie3'));

		var ww = $(window).width();
		var pieData;
		if (ww > 1600) {
			pieData = {
				pieTop: '40%',
				pieTop2: '36%',
				titleSize: 20,
				pieRadius: [80, 85],
				itemSize: 32
			}
		} else {
			pieData = {
				pieTop: '30%',
				pieTop2: '26%',
				titleSize: 16,
				pieRadius: [60, 64],
				itemSize: 28
			}
		};
		//弹出框调用各模块情况
		var pieOption1 = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				top: '5%',
				left: 'center'
			},
			series: [
				{
					name: '各模块占比',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 40,
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{ value: 1048, name: '模块1' },
						{ value: 735, name: '模块2' },
						{ value: 580, name: '模块3' },
						{ value: 484, name: '模块4' },
						{ value: 300, name: '模块5' }
					]
				}
			]
		};
		var pieOption2 = {
			angleAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			radiusAxis: {},
			polar: {},
			series: [
				{
					type: 'bar',
					data: [1, 2, 3, 4, 3, 5, 1],
					coordinateSystem: 'polar',
					name: 'A',
					stack: 'a',
					emphasis: {
						focus: 'series'
					}
				},
				{
					type: 'bar',
					data: [2, 4, 6, 1, 3, 2, 1],
					coordinateSystem: 'polar',
					name: 'B',
					stack: 'a',
					emphasis: {
						focus: 'series'
					}
				},
				{
					type: 'bar',
					data: [1, 2, 3, 4, 1, 2, 5],
					coordinateSystem: 'polar',
					name: 'C',
					stack: 'a',
					emphasis: {
						focus: 'series'
					}
				}
			],
			legend: {
				show: true,
				data: ['A', 'B', 'C']
			}
		};
		var pieOption3 = {
			title: {
				x: 'center',
				y: pieData.pieTop2,
				text: '123',
				textStyle: {
					fontWeight: 'normal',
					color: '#1eb6fe',
					fontSize: pieData.titleSize
				},
				subtext: '总数：100\n占比：50',
				subtextStyle: {
					color: '#fff',
				}
			},
			tooltip: {
				show: false,
			},
			toolbox: {
				show: false,
			},

			series: [{
				type: 'pie',
				clockWise: false,
				radius: pieData.pieRadius,
				hoverAnimation: false,
				center: ['50%', '50%'],
				data: [{
					value: 50,
					label: {
						normal: {
							formatter: '{d}%',
							position: 'outside',
							show: true,
							textStyle: {
								fontSize: pieData.itemSize,
								fontWeight: 'normal',
								color: '#1eb6fe'
							}
						}
					},
					itemStyle: {
						normal: {
							color: '#1eb6fe',
							shadowColor: '#1eb6fe',
							shadowBlur: 10
						}
					}
				}, {
					value: 50,
					name: '未工作',
					itemStyle: {
						normal: {
							color: 'rgba(44,59,70,1)', // 未完成的圆环的颜色
							label: {
								show: false
							},
							labelLine: {
								show: false
							}
						},
						emphasis: {
							color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
						}
					},
					itemStyle: {
						normal: {
							color: '#11284e',
							shadowColor: '#11284e',
						}
					},
				}]
			}]
		}

		//弹出框调用各模块情况
		summaryBar = echarts.init(document.getElementById('summaryBar'));
		var barOption = {
			xAxis: {
				data: ['加氢站1', '加氢站2', '加氢站3'],
				axisLabel: {
					color: '#ffffff' // 设置x轴字体颜色为白色
				},
			},
			yAxis: {
				axisLabel: {
					color: '#ffffff' // 设置y轴字体颜色为白色
				},
			},
			dataGroupId: '',
			animationDurationUpdate: 500,
			series: {
				type: 'bar',
				id: 'sales',
				data: [
					{
						value: 5,
						groupId: '加氢站1'
					},
					{
						value: 2,
						groupId: '加氢站2'
					},
					{
						value: 4,
						groupId: '加氢站3'
					}
				],
				universalTransition: {
					enabled: true,
					divideShape: 'clone'
				}
			}
		};
		const drilldownData = [
			{
				dataGroupId: '加氢站1',
				data: [
					['加氢机1', 4],
					['加氢机2', 2],
					['加氢机3', 1],
					['加氢机4', 2],
					['加氢机5', 1]
				]
			},
			{
				dataGroupId: '加氢站2',
				data: [
					['加氢机1', 4],
					['加氢机2', 2]
				]
			},
			{
				dataGroupId: '加氢站3',
				data: [
					['加氢机1', 4],
					['加氢机2', 2],
					['加氢机3', 2]
				]
			}
		];
		summaryBar.on('click', function (event) {
			if (event.data) {
				var subData = drilldownData.find(function (data) {
					return data.dataGroupId === event.data.groupId;
				});
				if (!subData) {
					return;
				}
				summaryBar.setOption({
					xAxis: {
						data: subData.data.map(function (item) {
							return item[0];
						})
					},
					series: {
						type: 'bar',
						id: 'sales',
						dataGroupId: subData.dataGroupId,
						data: subData.data.map(function (item) {
							return item[1];
						}),
						itemStyle: {
							color: 'blue' // 设置柱子颜色为蓝色
						},
						universalTransition: {
							enabled: true,
							divideShape: 'clone'
						}
					},
					graphic: [
						{
							type: 'text',
							left: 50,
							top: 20,
							style: {
								text: 'Back',
								fontSize: 18,
								color: 'blue',
							},
							onclick: function () {
								summaryBar.setOption(barOption);
							}
						}
					]
				});
			}
		});

		//弹出框调用ECharts折线图
		summaryLine = echarts.init(document.getElementById('summaryLine'));
		var lineOption = {

			tooltip: {
				trigger: 'item',
				formatter: function (params) {
					var res = '本月' + params.name + '加氢量：' + params.data;
					return res;
				}
			},
			grid: {
				top: '20%',
				left: '0%',
				width: '100%',
				height: '80%',
				containLabel: true
			},
			xAxis: {
				data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
				axisLabel: {
					show: true,
					textStyle: {
						fontSize: '12px',
						color: '#3e70b0',
					}
				},
				axisLine: {
					lineStyle: {
						color: '#0e2c52',
						width: 1,
					}
				}
			},

			yAxis: {
				axisLabel: {
					show: true,
					textStyle: {
						fontSize: '12px',
						color: '#3e70b0',
					}
				},
				axisLine: {
					lineStyle: {
						color: '#0e2c52',
						width: 1,
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#0e2c52',
						width: 1,
					}
				}
			},

			series: {
				name: '',
				type: 'line',
				data: ['5', '14', '3', '6', '8', '18', '11', '4', '8', '7', '16', '13', '6', '10', '11', '9', '19', '13', '4', '20', '12', '7', '13', '15', '8', '3', '9', '16', '11', '16', '8'],
				areaStyle: {
					normal: {
						color: 'rgba(79,237,247,0.3)',
					}
				},
				itemStyle: {
					normal: {
						lineStyle: {
							color: '#00dafb',
							width: 1,
						},
						color: '#00dafb',
					},
				},
			},
		}

		summaryPie1.setOption(pieOption1);
		summaryPie2.setOption(pieOption2);
		summaryPie3.setOption(pieOption3);
		summaryBar.setOption(barOption);
		summaryLine.setOption(lineOption);
	}

	//弹窗
	$('.summaryBtn').on('click', function () {
		// $('.filterbg').show();
		// $('.popup').show();
		// $('.popup').width('3px');
		// $('.popup').animate({ height: '76%' }, 400, function () {
		// 	$('.popup').animate({ width: '82%' }, 400);
		// });
		// setTimeout(summaryShow, 800);
	});
	$('.popupClose').on('click', function () {
		$('.popupClose').css('display', 'none');
		$('.summary').hide();
		summaryPie1.clear();
		summaryPie2.clear();
		summaryPie3.clear();
		summaryBar.clear();
		summaryLine.clear();
		$('.popup').animate({ width: '3px' }, 400, function () {
			$('.popup').animate({ height: 0 }, 400);
		});
		setTimeout(summaryHide, 800);
	});
	function summaryShow () {
		$('.popupClose').css('display', 'block');
		$('.summary').show();
		setSummary();

	};
	function summaryHide () {
		$('.filterbg').hide();
		$('.popup').hide();
		$('.popup').width(0);
	};

	$(window).resize(function () {
		myChart1.resize();
		myChartPie.resize();
		myChartPieAvailable.resize();
		try {
			summaryPie1.resize();
			summaryPie2.resize();
			summaryPie3.resize();
			summaryBar.resize();
			summaryLine.resize();
		} catch (err) {
			return false;
		}
	});


	//地图上的搜索
	$('.searchBtn').on('click', function () {
		$(this).hide();
		$('.searchInner').addClass('open');
		setTimeout(function () {
			$('.searchInner').find('form').show();
		}, 400);
	});

	$('.search').on('click', function (event) {
		event.stopPropagation();
	});
	$('body').on('click', function () {
		$('.searchInner').find('form').hide();
		$('.searchInner').removeClass('open');
		setTimeout(function () {
			$('.searchBtn').show();
		}, 400);
	});

	//状态滚动条样式
	$('.stateUl').niceScroll({
		cursorcolor: "#045978",//#CC0071 光标颜色
		cursoropacitymax: 0.6, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
		touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
		cursorwidth: "4px", //像素光标的宽度
		cursorborder: "0", // 	游标边框css定义
		cursorborderradius: "4px",//以像素为光标边界半径
		autohidemode: false //是否隐藏滚动条
	});

	//鼠标移入显示信息框
	$('.workTime').on('mouseenter', 'span', function (ev) {
		var x = ev.clientX;
		var y = ev.clientY;
		var sDate, sStart, sEnd, sConsume, infos, sHour, sMin;
		sDate = $(this).attr("sDate");
		sStart = $(this).attr("sStart");
		sEnd = $(this).attr("sEnd");
		sConsume = $(this).attr("sConsume");
		sHour = Math.floor(sConsume / 60);
		sMin = sConsume - sHour * 60;

		infos = '<div class="workTimeInfo" style="left:' + x + 'px;top:' + y + 'px"><p>日期：' + sDate + '</p><p>开始时间：' + sStart + '</p><p>结束时间：' + sEnd + '</p><p>总用时：' + sHour + '小时' + sMin + '分钟</p></div>';
		$('body').append(infos);
	});
	$('.workTime').on('mouseout', function () {
		$('.workTimeInfo').remove();
	});


	//信息弹出框的显示隐藏效果
	$('.infoBtn').on('click', function () {
		$('.filterbg').show();
		$('.carInfo').show();
		$('.carInfo').width('3px');
		$('.carInfo').animate({ height: '76%' }, 400, function () {
			$('.carInfo').animate({ width: '82%' }, 400);
		});
		setTimeout(function () {
			$('.infoBox').show();
			$('.carClose').css('display', 'block');
		}, 800);

	});
	$('.carClose').on('click', function () {
		$('.carClose').css('display', 'none');
		$('.infoBox').hide();

		$('.carInfo').animate({ width: '3px' }, 400, function () {
			$('.carInfo').animate({ height: 0 }, 400);
		});
		setTimeout(function () {
			$('.filterbg').hide();
			$('.carInfo').hide();
			$('.carInfo').width(0);
		}, 800);
	});

	// 订单详情弹框内容
	const isModelShow = function (e) {
		let item = JSON.parse($(this).attr('data-obj'))
		let str = `
					<li>
								<div class="table-content-item">
									<span>${item.hydrogenDispenserName || '—'}</span>
									<span>${item.hydrogenGunName || '—'}</span>
									<span>${item.hydrogenTankName || '—'}</span>
									<span>${item.orderNo}</span>
									<span>${item.unitPrice}</span>
									<span>${item.totalPrice}</span>
									<span>${item.refuelingWeight}</span>
									<span>${item.refuelingTime || '—'}</span>
									<span>${item.timeConsum || '—'}</span>
									<span>${item.organizationCode || '—'}</span>
								</div>
							</li>
		`
		$('.table-content').empty()
		$('.table-content').append(str)
		$('.model-box').show()
		$('.model-bg').show()
	}
	const isModelHide = function (e) {
		$('.model-box').hide()
		$('.model-bg').hide()
	}


	// 模态框弹出-用户情况点击显示详情
	$('.list-box').on('click', '.time-item', isModelShow)
	// data-curDataItem
	// 模态框关闭按钮
	$('.close-btn').on('click', isModelHide)
	$('.model-confirm').on('click', isModelHide)
});
